<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>互动</title>
    <link rel="stylesheet" href="${ctx}/static/styles/interaction.css" type="text/css">
</head>

<body>
<div class="inter-section inter-demand">
    <div class="container row">
        <div class="col-sm-5">
            <div class="inter-section-img">
                <img src="${ctx}/static/images/link1.png">
            </div>
            <div class="inter-section-header">
                <p class="inter-section-title">
                    标准需求
                </p>
                <span class="inter-section-subtitle">DEMAND</span>
            </div>
        </div>
        <div class="col-lg-7">
            <h4>标准需求<a href="${ctx}/infor/list/1">更多</a></h4>
            <div class="inter-section-list">
                <ul>
                    <c:forEach items="${inforPage1.content}" var="infor">
                        <li class="clearfix">
                            <p><fmt:formatDate value="${infor.publishDate}" type="date" dateStyle="long"/></p>
                            <a href="${ctx}/infor/detail/${infor.id}">${infor.title}</a>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="inter-section inter-consult">
    <div class="container row">
        <div class="col-lg-7">
            <h4>标准咨询<a href="${ctx}/infor/list/2">更多</a></h4>
            <div class="inter-section-list">
                <ul>
                    <c:forEach items="${inforPage2.content}" var="infor">
                        <li class="clearfix">
                            <p><fmt:formatDate value="${infor.publishDate}" type="date" dateStyle="long"/></p>
                            <a href="${ctx}/infor/detail/${infor.id}">${infor.title}</a>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="inter-section-img">
                <img src="${ctx}/static/images/link2.png">
            </div>
            <div class="inter-section-header">
                <p class="inter-section-title">
                    标准咨询
                </p>
                <span class="inter-section-subtitle">CONSULT</span>
            </div>
        </div>
    </div>
</div>
<div class="inter-section inter-suggest">
    <div class="container row">
        <div class="col-sm-5">
            <div class="inter-section-img">
                <img src="${ctx}/static/images/link3.png">
            </div>
            <div class="inter-section-header">
                <p class="inter-section-title">
                    建议
                </p>
                <span class="inter-section-subtitle">SUGGESTION</span>
            </div>
        </div>
        <div class="col-lg-7">
            <h4>建议<a href="${ctx}/infor/list/3">更多</a></h4>
            <div class="inter-section-list">
                <ul>
                    <c:forEach items="${inforPage3.content}" var="infor">
                        <li class="clearfix">
                            <p><fmt:formatDate value="${infor.publishDate}" type="date" dateStyle="long"/></p>
                            <a href="${ctx}/infor/detail/${infor.id}">${infor.title}</a>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="inter-section inter-survey lastbox">
    <div class="container row">
        <div class="col-lg-7">
            <h4>网上调查<a href="${ctx}/infor/list/4">更多</a></h4>
            <div class="inter-section-list">
                <ul>
                    <c:forEach items="${inforPage4.content}" var="infor">
                        <li class="clearfix">
                            <p><fmt:formatDate value="${infor.publishDate}" type="date" dateStyle="long"/></p>
                            <a href="${ctx}/infor/detail/${infor.id}">${infor.title}</a>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="inter-section-img">
                <img src="${ctx}/static/images/link4.png">
            </div>
            <div class="inter-section-header">
                <p class="inter-section-title">
                    网上调查
                </p>
                <span class="inter-section-subtitle">SURVEY</span>
            </div>
        </div>
    </div>
</div>
<div class="inter-menu">
    <ul>
        <li class="inter-menu-item active">
            <a>标准需求</a>
        </li>
        <li class="inter-menu-item">
            <a>标准咨询</a>
        </li>
        <li class="inter-menu-item">
            <a>建议</a>
        </li>
        <li class="inter-menu-item">
            <a>网上调查</a>
        </li>
        <li class="inter-menu-item">
            <a href="${ctx}/infor/create">新建咨询</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    $(".inter-menu-item").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
        if ($(this).index() != 4) {
            $('html,body').animate({
                scrollTop: $(".inter-section").eq($(this).index()).offset().top
            }, 1000);
        }
    })
</script>
</body>
</html>
